// component/indexEcharts/echarts2/index.ts
import * as echarts from '../../ec-canvas/echarts'
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array,
      value: []
    }
  },
  observers: {
    "data": function (newVal) {
      // console.log(newVal)
      this.initEcharts(newVal)
      // console.log(x,data,data2)
      // this.setData({
      //   // list: newVal,
      //   ec: {
      //     onInit: function (canvas, width, height, dpr) {
      //       const initChart = echarts.init(canvas, null, {
      //         width: width,
      //         height: height,
      //         devicePixelRatio: dpr
      //       });
      //       initChart.setOption({
      //         title: {
      //           text: '全网负荷预测与供热量',
      //           left: 0,
      //           top: 0
      //         },
      //         tooltip: {
      //           //提示框组件
      //           trigger: "axis", //触发类型 柱状图
      //           axisPointer: { type: "" }, //触发效果 移动上去 背景效果
      //           formatter: function (params) {
      //             console.log(params);

      //             let html =
      //               params[0].name == 0
      //                 ? params[0].name + "0:00" + "\n"
      //                 : params[0].name + ":00" + "\n";
      //             for (let i = 0; i < params.length; i++) {
      //               html +=
      //                 params[i].marker +
      //                 params[i].seriesName +
      //                 ": " +
      //                 params[i].value +
      //                 " GJ/h · 万m²" +
      //                 "\n";
      //             }
      //             return html;
      //           },
      //         },
      //         legend: {
      //           type: "plain", // 图列类型，默认为 'plain'
      //           // top: "left", // 图列相对容器的位置 top\bottom\left\right
      //           bottom: 0,
      //           data: ["日实际能耗", "日预测能耗"],
      //         },
      //         grid: {
      //           top: "60px",
      //           left: "7px",
      //           right: "10px",
      //           bottom: "25px",
      //           // height: '170',
      //           // top: 100,
      //           // left:'5%',
      //           containLabel: true
      //         },
      //         xAxis: {
      //           name: "h",
      //           show: true,
      //           gridIndex: 0,
      //           type: "category",
      //           boundaryGap: false,
      //           // data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
      //           data: newVal.map(item => item.hour),
      //           axisPointer: {
      //             label: {
      //               margin: 5,
      //             },
      //           },
      //           axisTick: {
      //             show: false,
      //           },
      //           axisLine: {
      //             show: true,
      //             lineStyle: {
      //               // color: "#fff",
      //             },
      //           },
      //           axisLabel: {
      //             show: true,
      //             // color: "#fff",
      //           },
      //         },
      //         yAxis: {
      //           name: "GJ/h · 万m²",
      //           type: "value",
      //           splitNumber: 4,
      //           axisLine: {
      //             show: true,
      //             lineStyle: {
      //               // color: "#fff",
      //             },
      //           },
      //           axisLabel: {
      //             show: true,
      //             textStyle: {
      //               // color: "#fff",
      //             },
      //             margin: 4,
      //           },
      //           splitLine: { show: false },
      //         },
      //         series: [
      //           {
      //             name: "日实际能耗",
      //             type: "line",
      //             smooth: true,
      //             // data: [
      //             //   4300, 4100, 4900, 4700, 4500, 3300, 3100, 3900, 2700, 3500, 4300, 3100,
      //             //   0,
      //             // ],
      //             data: newVal.map(item => item.日实际能耗),
      //             itemStyle: {
      //               normal: {
      //                 color: "#22DC9B",
      //                 lineStyle: {
      //                   color: "#22DC9B",
      //                 },
      //               },
      //             },
      //             areaStyle: {
      //               color: {
      //                 type: "linear",
      //                 x: 0, //右
      //                 y: 0, //下
      //                 x2: 0, //左
      //                 y2: 1, //上
      //                 colorStops: [
      //                   {
      //                     offset: 0.1,
      //                     color: "#22DC9B", // 0% 处的颜色
      //                   },
      //                   {
      //                     offset: 1,
      //                     color: "#fff", // 100% 处的颜色
      //                   },
      //                 ],
      //               },
      //             },
      //           },
      //           {
      //             name: "日预测能耗",
      //             type: "line",
      //             smooth: true,
      //             // data: [
      //             //   3000, 2800, 2600, 2400, 2200, 2000, 1800, 1600, 1400, 1200, 1000, 800,
      //             //   600,
      //             // ],
      //             data: newVal.map(item => item.日预测能耗),
      //             itemStyle: {
      //               normal: {
      //                 color: "#FFC001",
      //                 lineStyle: {
      //                   color: "#FFC001",
      //                 },
      //               },
      //             },
      //             areaStyle: {
      //               color: {
      //                 type: "linear",
      //                 x: 0, //右
      //                 y: 0, //下
      //                 x2: 0, //左
      //                 y2: 1, //上
      //                 colorStops: [
      //                   {
      //                     offset: 0.1,
      //                     color: "#FFC001", // 0% 处的颜色
      //                   },
      //                   {
      //                     offset: 1,
      //                     color: "#fff", // 100% 处的颜色
      //                   },
      //                 ],
      //               },
      //             },
      //           },
      //         ],
      //       })
      //       canvas.setChart(initChart);
      //       return initChart;
      //     }
      //   }
      // })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    list: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initEcharts(data) {
      this.lineComponent = this.selectComponent("#line-chart");
      this.lineComponent.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        })
        chart.setOption({
          title: {
            text: '全网负荷预测与供热量',
            left: 0,
            top: 0
          },
          tooltip: {
            //提示框组件
            trigger: "axis", //触发类型 柱状图
            axisPointer: { type: "" }, //触发效果 移动上去 背景效果
            formatter: function (params) {
              // console.log(params);

              let html =
                params[0].name == 0
                  ? params[0].name + "0:00" + "\n"
                  : params[0].name + ":00" + "\n";
              for (let i = 0; i < params.length; i++) {
                html +=
                  params[i].marker +
                  params[i].seriesName +
                  ": " +
                  params[i].value +
                  " GJ/h · 万m²" +
                  "\n";
              }
              return html;
            },
          },
          legend: {
            type: "plain", // 图列类型，默认为 'plain'
            // top: "left", // 图列相对容器的位置 top\bottom\left\right
            bottom: 0,
            data: ["日实际能耗", "日预测能耗"],
          },
          grid: {
            top: "60px",
            left: "15px",
            right: "45px",
            bottom: "25px",
            // height: '170',
            // top: 100,
            // left:'5%',
            containLabel: true
          },
          xAxis: {
            name: "h",
            show: true,
            gridIndex: 0,
            type: "category",
            boundaryGap: false,
            // data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
            data: data.map(item => item.hour),
            axisPointer: {
              label: {
                margin: 5,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                // color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              // interval: 0,
              // color: "#fff",
            },
          },
          yAxis: {
            name: "GJ/h · 万m²",
            type: "value",
            splitNumber: 4,
            axisLine: {
              show: true,
              lineStyle: {
                // color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                // color: "#fff",
              },
              margin: 4,
            },
            splitLine: { show: false },
          },
          series: [
            {
              name: "日实际能耗",
              type: "line",
              smooth: true,
              // data: [
              //   4300, 4100, 4900, 4700, 4500, 3300, 3100, 3900, 2700, 3500, 4300, 3100,
              //   0,
              // ],
              data: data.map(item => item.日实际能耗),
              itemStyle: {
                normal: {
                  color: "#22DC9B",
                  lineStyle: {
                    color: "#22DC9B",
                  },
                },
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "#22DC9B", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#fff", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            {
              name: "日预测能耗",
              type: "line",
              smooth: true,
              // data: [
              //   3000, 2800, 2600, 2400, 2200, 2000, 1800, 1600, 1400, 1200, 1000, 800,
              //   600,
              // ],
              data: data.map(item => item.日预测能耗),
              itemStyle: {
                normal: {
                  color: "#FFC001",
                  lineStyle: {
                    color: "#FFC001",
                  },
                },
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "#FFC001", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#fff", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          ],
        })
        return chart
      })
    }
  },
  //小程序声明周期
  lifetimes: {
    attached: async function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})